<template>
	<uni-drawer ref="drawer" mode="left" :width="drawerWidth" :maskClick="true" @change="onChange">
		<view class="wrap">
			<view class="user">
				<image class="avatar" :src="user?.avatar || grayAvatar" mode="cover" @tap="handleUserClick" />
				<view class="info" @tap="handleUserClick">
					<view class="name">{{ user?.nick || '未登录' }}</view>
					<view class="desc">{{ user ? user.sign || '认真生活，热爱分享' : '登录解锁完整功能' }}</view>
				</view>
				<button v-if="!user" class="login" @tap="$emit('login')">立即登录</button>
			</view>
			<view class="section">
				<view class="title">常用功能</view>
				<view class="grid">
					<view class="cell" v-for="f in features" :key="f.key" @tap="$emit('feature', f.key)">
						<uni-icons :type="f.icon" color="#fff" size="20" />
						<text class="label">{{ f.text }}</text>
					</view>
				</view>
			</view>
			<view class="section">
				<view class="title">工具</view>
				<view class="list">
					<view class="item" @tap="$emit('scan')">
						<uni-icons type="scan" size="18" color="#fff" />
						<text class="it">扫一扫</text>
					</view>
					<view class="item" @tap="$emit('settings')">
						<uni-icons type="gear-filled" size="18" color="#fff" />
						<text class="it">设置</text>
					</view>
				</view>
			</view>
			<view class="section">
				<view class="title">常用小程序</view>
				<scroll-view scroll-x class="apps">
					<view class="app" v-for="a in apps" :key="a.name">
						<image class="app-icon" :src="a.icon || grayAvatar" />
						<text class="app-name">{{ a.name }}</text>
					</view>
				</scroll-view>
			</view>
			<view class="footer">
				<view class="footer-item" @tap="$emit('help')">
					<uni-icons type="help" size="16" color="#999" />
					<text class="footer-text">帮助与反馈</text>
				</view>
				<view class="footer-item" @tap="$emit('about')">
					<uni-icons type="info" size="16" color="#999" />
					<text class="footer-text">关于我们</text>
				</view>
				<view class="footer-item" @tap="$emit('privacy')">
					<uni-icons type="locked" size="16" color="#999" />
					<text class="footer-text">隐私政策</text>
				</view>
			</view>
		</view>
	</uni-drawer>
</template>

<script setup>
import { ref, computed, defineExpose, onMounted } from 'vue'
const props = defineProps({ user: Object })
const emit = defineEmits(['login', 'feature', 'scan', 'settings', 'help', 'about', 'privacy'])
const drawer = ref(null)
const grayAvatar = '/static/logo.png'
const screenWidth = ref(375) // 默认值
const drawerWidth = computed(() => {
	// 屏幕宽度的4/5（五分之四）
	return screenWidth.value * 4 / 5
})
const features = [
	{ key:'favorites', text:'收藏', icon:'star' },
	{ key:'history', text:'历史', icon:'calendar' },
	{ key:'downloads', text:'下载', icon:'download' }
]
const apps = [
	{ name:'天气' }, { name:'备忘录' }, { name:'快递查询' }, { name:'记账' }
]
onMounted(() => {
	// 获取屏幕宽度
	const systemInfo = uni.getSystemInfoSync()
	screenWidth.value = systemInfo.windowWidth || 375
})
function open(){ drawer.value?.open() }
function close(){ drawer.value?.close() }
function onChange(){ /* 可选：监听开合 */ }
function handleUserClick(){
	if(!props.user){
		emit('login')
	}
}
defineExpose({ open, close })
</script>

<style lang="scss" scoped>
.wrap{ 
	width: 100%; 
	height: 100vh; 
	background:#000; 
	padding: 20rpx; 
	box-sizing:border-box; 
	display: flex;
	flex-direction: column;
}
.user{ display:flex; align-items:center; gap: 12rpx; }
.avatar{ width: 80rpx; height: 80rpx; border-radius: 50%; background:#333; cursor: pointer; }
.info{ flex:1; min-width: 0; cursor: pointer; }
.name{ font-weight: 600; font-size: 28rpx; color:#fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desc{ margin-top: 4rpx; font-size: 22rpx; color:#999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login{ 
	height: 40rpx; 
	line-height:40rpx; 
	padding: 0 20rpx; 
	border-radius: 20rpx; 
	background:#333; 
	color:#fff; 
	font-size: 22rpx;
	flex-shrink: 0;
}
.section{ margin-top: 20rpx; flex: 1; min-height: 0; }
.title{ font-size: 24rpx; color:#666; margin-bottom: 10rpx; }
.grid{ display:flex; flex-wrap: wrap; gap: 16rpx 0; }
.cell{ width: 33.33%; display:flex; flex-direction:column; align-items:center; gap: 8rpx; color:#fff; }
.label{ font-size: 22rpx; color:#fff }
.list{ background:#1a1a1a; border-radius: 12rpx; overflow:hidden; }
.item{ display:flex; align-items:center; gap: 10rpx; padding: 16rpx; border-bottom: 1rpx solid #333; }
.item:last-child{ border-bottom: none }
.it{ font-size: 24rpx; color:#fff }
.apps{ white-space: nowrap; }
.app{ display:inline-flex; flex-direction:column; align-items:center; margin-right: 16rpx; background:#1a1a1a; padding: 12rpx; border-radius: 12rpx; }
.app-icon{ width: 64rpx; height: 64rpx; border-radius: 12rpx; background:#333; }
.app-name{ margin-top: 6rpx; font-size: 20rpx; color:#fff }
.footer{
	margin-top: auto;
	padding-top: 24rpx;
	border-top: 1rpx solid #333;
}
.footer-item{
	display: flex;
	align-items: center;
	gap: 10rpx;
	padding: 12rpx 0;
}
.footer-text{
	font-size: 22rpx;
	color: #999;
}
</style>


